<template>
  <div class="comment-post">
      <van-field 
      class="post-field"
      v-model.trim="message" 
      type="textarea"
      rows="2"
      
      maxlength="50"
      show-word-limit
      placeholder="请输入留言" />
      <van-button 
      class="post-btn" 
      @click="onPostComment" 
      :disabled="!message.length"
      color="#19f005"
      plain
      >
        发布
      </van-button>
  </div>
</template>
<script>
import {addCommentAPI} from '@/api';


export default {
  name:"CommentPost",
  components:{},
  inject:{
    articleId:{
      type:[Number,String,Object],
      default:null
    }
  },
  props:{
    target:{
      type:[Number,String,Object],
      required:true
    }
  },
  data(){
    return {
      message:''
    }
  },
  computed:{},
  watch:{},
  methods:{
    async onPostComment(){
      this.$toast.loading({
          message: '发布中...',
          forbidClick: true,//静止点击背景
          duration:2000//持续时间 默认2000
        });
      try{
        const {data}=await addCommentAPI({
          target:this.target,
          content:this.message,
          art_id:this.articleId
        })
        this.message=""
        this.$emit('post-success',data.data)
        this.$toast.success("发不成功")
      }catch(err){
        this.$toast.fail("评论发布失败")
      }

    }
  }
}
</script>
<style lang="less" scoped>
.comment-post{
  display: flex;
  padding: 30px 0 30px 30px;
  align-items: center;
  .post-field{
    flex: 1;
    background-color: rgb(233, 233, 233);
    border: 1px solid #fff;
    border-radius: 10px;
  }
  .post-btn{
    border: none;
  }
}
</style>